<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="550px" :height="260" destroyOnClose>
    <Tabs tab-position="left" v-model:activeKey="activeKey" :tabBarGutter="5">
      <template v-for="item in tabList" :key="item.key">
        <TabPane :tab="item.name" forceRender>
          <component :is="item.component" v-bind="{ ...item.data, verifyType: item.key}" class="verify-content" ref="verifyRef"/>
        </TabPane>
      </template>
    </Tabs>
  </BasicModal>
</template>
<script lang="ts">
import { ref, shallowRef, defineComponent, computed } from 'vue';
import { Tabs } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '/@/components/Modal';
import EmailVerify from './EmailVerify.vue'
import SmsVerify from './SmsVerify.vue'
import { isFunction } from '/@/utils/is';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const TabPane = Tabs.TabPane

export default defineComponent({
  props: {
    submitCallback: { type: Function}
  },
  name: 'VerifyModal',
  emits: ['register'],
  components: {
    EmailVerify, SmsVerify, BasicModal, TabPane, Tabs
  },
  setup(props, { emit }) {
    const apiParams = ref({})
    // 暂存验证的tab
    const verifyTabs = {
      verifyPhone: {
        key:  'verify_phone',
        name: '手机号验证',
        component: shallowRef(SmsVerify),
      },
      verifyEmail: {
        key: 'verify_email',
        name: '邮箱验证',
        component: shallowRef(EmailVerify),
      }
    }
    const tabList = ref<any>([])

    const { prefixCls } = useDesign('verify');
    const verifyRef = ref<any>()
    const activeKey = ref('')
    const title = ref('安全验证')

    //表单赋值
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      const verifyType = data.verifyType
      console.log('verifyType', verifyType);
      console.log('data', data);
      tabList.value = []
      apiParams.value = data.apiParams
      // data参数可选如下: toUser api apiParams

      // 过滤限制的可选验证类型, 如果不传就不限制验证的类型
      if (verifyType && verifyTabs[verifyType]) {
        tabList.value.push({...verifyTabs[verifyType], data: { ...data }})
      } else {
        for (const key in verifyTabs) {
          tabList.value.push({...verifyTabs[key], data: { ...data }})
        }
      }
      activeKey.value = tabList.value.length > 0 ? tabList.value[0].key : ''

      setModalProps({ canFullscreen: false, defaultFullscreen: false, draggable: false })
    });

    const handleSubmit = async () => {
      setModalProps({ loading: true })
      try {
        const verifyData = await verifyRef.value.filter(e => e.verifyType === activeKey.value)[0].getData()
        if (!props.submitCallback || !isFunction(props.submitCallback)) {
          console.log('submitCallback is not function');
          return
        }
        await props.submitCallback({...verifyData, ...apiParams.value})
        closeModal()
      } finally {
        setModalProps({ loading: false })
      }
    }
    return  {
      tabList, registerModal, handleSubmit,
      title, verifyRef, prefixCls, activeKey
    }
  }
})

</script>

<style lang="less">
.verify-content {
  margin-left: -30px;
}
</style>
